/**
 * plugins/vuetify.ts
 *
 * Framework documentation: https://vuetifyjs.com`
 */

// Styles
// 字体样式已经改为CDN方式引入了
// import '@mdi/fonts/css/materialdesignicons.css'
import 'vuetify/styles'


// Composables
import { createVuetify, ThemeDefinition } from 'vuetify'



const light: ThemeDefinition = {
  'dark': false,
  'colors': {
    'on-background': '#e91e69', // 设置 左侧slider 和 icon 颜色
    'primary': '#f279b1', // 设置 color 属性为 primary 的颜色 如 <VBtn color="primary"/>
    'info': '#f279b1',
  },
  // 关于主题样式变量参考目录 styles/vuetif/index.css
  //
  'variables': {
    // --v-theme-background 会覆盖掉原样式
    // 会自动给变量添加前缀 --v-
    // "theme-background": '#ddd',
    // --v-m-custom-color
    "m-custom-color": '#e91e69'
  }
}

// 黑暗主题模式背景
// const dark: ThemeDefinition = Object.assign({}, light)


// import * as components from 'vuetify/components'
// import * as directives from 'vuetify/directives'

// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
  // 是否开启服务端渲染
  ssr: true,
  // https://vuetifyjs.com/en/features/icon-fonts/
  icons: {
    defaultSet: 'mdi',
    sets: {

    }
  },
  theme: {
    defaultTheme: 'light',
    themes: {
      light,
      // dark
    },
  },

  // 处理一些组件没有注册成功无法引入问题
  // https://github.com/vuetifyjs/vuetify/issues/16444
  // https://vuetifyjs.com/en/getting-started/installation/#manual-steps
  // components,
  // directives,
  // components: {
  //   VBottomNavigation
  // }
})
